<template>
	<form @submit="submit">
		<uni-calendar lunar :startDate='today' ref='fixTime' :insert="false" :clearDate="false" @confirm="selFixTime"></uni-calendar>
		<view class="cell">
			<view class="cell-title">房号</view>
			<hg-select :clearable="false" :searchable="false" :items="bindeds" v-model="room" class="cell-content"></hg-select>
		</view>
		
		<view class="cell required">
			<view class="cell-title">联系人</view>
			<input class="cell-content" v-model="post.userName" placeholder="请输入联系人姓名"/>
		</view>
		
		<view class="cell required">
			<view class="cell-title">联系电话</view>
			<input class="cell-content" type="number" maxlength="11" v-model="post.phone" placeholder="请输入联系电话"/>
		</view>
		
		<view class="cell">
			<view class="cell-title">故障类型</view>
			<xfl-select class="cell-content" :list="types" @change="selType" placeholder="请选择故障类型"></xfl-select>
		</view>
		
		<view class="cell">
			<view class="cell-title">故障描述</view>
			<textarea confirm-type="done" auto-height class="cell-content" placeholder="请输入详细描述" v-model="post.remark" adjust-position  />
		</view>
		
		<view class="cell">
			<view class="cell-title">上门时间</view>
			<view class="cell-content" style="flex-grow: 0;flex-shrink: 0;" @tap="openTime">
				<view v-if="!post.visitDate" class="placeholder">上门日期</view>
				<view v-else>{{post.visitDate | smartTime('YY/mm/dd')}}</view>
			</view>
			<xfl-select class="cell-content" style="flex-grow: 1;flex-shrink: 1;" :list="segments" placeholder="上门时间"  @change="selTime"></xfl-select>
		</view>
		
		
		<center>请上传故障图片</center>
		<view style="margin-bottom: 100rpx;">
			<mk-upload :column="3" :imgList="picUrls" @onChoose="chooseImg" @onDelete="deleteImg"></mk-upload>
		</view>
		<view class="bottom horizontal">
			<button v-if="post.remark || post.type" style="color: white;background-color: var(--color-ok);" class="capsule scale" @tap="submit">提交</button>
			<button v-else disabled style="color: white;background-color: gray;" class="capsule scale">提交</button>
		</view>
	</form>
</template>

<script>
	import mkUpload from '@/components/mk-upload/mk-upload.vue'
	import hgSelect from '@/components/hg-select/hg-select.vue'
	import xflSelect from '@/components/xfl-select/xfl-select.vue'
	
	import card from '@/mixins/card.js'
	
	import {segments} from '@/static/constants.js'
	
	const app = getApp()
	
	export default {
		components:{
			mkUpload, hgSelect, xflSelect,
		},
		mixins:[card,],
		data() {
			return {
				segments,
				post:{
					// 房号
					roomId: "",
					// 故障类型
					type: '',
					// 故障详细描述
					remark:'',
					// 故障图片
					picUrls:[
						
					],
					// 联系人
					userName:"",
					// 联系电话
					phone:'',
					// 上门时间
					visitDate: '',
					// 上门开始时间
					visitStartTime: '',
					visitEndTime: '',
				},
				picUrls:[],
				uploaded: 0,
				// 故障类型列表
				types:[
					
				]
			}
		},
		computed:{
			today() {
				return new Date().toLocaleDateString()
			}
		},
		onLoad(opts) {
			// 获取故障信息列表
			uni.request({
				header:{
					Authorization: 'Bearer ' + app.globalData.token,
				},
				url: app.globalData.curl + 'workOrderHitchType',
				method: 'GET',
				data: {},
				success: res => {
					const {data} = res
					if (data.code==200){
						console.log(data)
						this.types.push(...data.data.map(type=>{
							return type.name
						}))
					}else if(data.code==500){
						uni.showToast({
							icon:'none',
							title: data.message,
						});
					}
				},
				fail: (err) => {console.error(err)},
				complete: () => {}
			});
		},
		watch:{
			uploaded(newVal){
				if(newVal>=this.picUrls.length){
					// 已经上传完所有的图片，可以进行表单提交
					uni.request({
						header:{
							Authorization: 'Bearer ' + app.globalData.token,
						},
						url: app.globalData.curl + 'workOrder/reportMend',
						method: 'POST',
						data: {
							...this.post,
							roomId: this.get.rooms[this.room].id,
							picUrls: this.post.picUrls.join(','),
						},
						success: res => {
							const {data} = res
							if(data.code==200){
								uni.hideLoading()
								uni.showModal({
									showCancel: false,
									title:'报修',
									content: '提交成功，我们工作人员会尽快与您联系！',
									success: (res) => {
										if(res.confirm){
											uni.redirectTo({
												url:'../progress/progress'
											})
										}
									},
								})
							}else if(data.code==500){
								uni.hideLoading()
								uni.showToast({
									icon:'none',
									title: data.message,
								})
							}
						},
						fail: (err) => {console.error(err)},
						complete: () => {}
					});
				}
			}
		},
		methods: {
			selTime(e){
				const [start, end] = e.newVal.split('-')
				this.post.visitStartTime = start
				this.post.visitEndTime = end
			},
			openTime(){
				this.$refs.fixTime.open()
			},
			selFixTime(e){
				const {
					year,
					month,
					date
				} = e;
				this.post.visitDate = `${year}/${month}/${date}`
			},
			selType(evt){
				const {index} = evt
				this.post.type = this.types[index]
			},
			chooseImg(evt){
				this.picUrls.push(...evt.tempFilePaths)
			},
			deleteImg(evt){
				this.picUrls.splice(evt, 1)
			},
			submit(){
				console.log(this.post)
				if(!this.post.userName || !this.post.phone){
					uni.showToast({
						icon:'none',
						title:'联系人和联系方式必填！'
					})
					return 
				}
				if(this.post.remark.trim()=='' && this.post.type.trim()==''){
					uni.showToast({
						icon:'none',
						title:'故障类型和故障描述必填其一!',
						duration:3000,
					})
					return;
				}
				if(this.picUrls.length>0){
					uni.showLoading({
						title:'上传图片中...'
					})
					this.post.picUrls.push(...this.picUrls)
					// 依次循环上传图片集
					for (let i=0;i<this.picUrls.length;i++) {
						const idx = i						// 闭包作用
						const pic = this.picUrls[idx]
						uni.uploadFile({
							header:{
								Authorization: 'Bearer ' + app.globalData.token,
							},
							url: app.globalData.furl + 'upload',
							filePath: pic,
							name: "file",
							formData:{},
							fail:(err)=>{console.error(err)},
							success:(res)=>{
								let data = JSON.parse(res.data)
								if(data.code==200){
									const url = data.data
									// 记录下图片的远程地址
									this.post.picUrls[idx] = url
									console.log(url)
									this.uploaded++
								}else if(data.code==500){
									uni.showToast({
										icon:'none',
										title: data.message,
									})
								}
							}
						})
					}
				}else{
					this.uploaded=1
				}
			},
		}
	}
</script>

<style scoped>
	textarea{
		background-color: white;
		border-radius: 10rpx;
	}

</style>
